<template>
  <div>
      <el-collapse v-model="activeNames" style="width:600px" @change="setCheckedNode" accordion>
        <el-collapse-item :title="item.nameZh"  :name="item.id"  v-for="(item,index) in roles"  :key="index" >  
          <el-card class="box-card" style="width:600px">
            <div slot="header" class="clearfix" >
              <span>可访问资源</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="deleteRole(item.id)" ><i class="el-icon-delete" style="color:red" ></i></el-button>
            </div>
            <div>
              <el-tree
                :data="menu"
                show-checkbox
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps">
              </el-tree>
              <el-button :span="4" type="primary" @click="updateRoleMenu(item.id,index)" size="small" style="float: right;margin-right: 5px;">确认修改</el-button>
            </div>
          </el-card>
         
        </el-collapse-item>
      </el-collapse>
  </div>
</template>
<script>
export default {
  name: "Role",
  data() {
    return {
      activeNames: [],
      roles: [],
      menu:[],
      defaultProps: {
          children: 'secondaryMenus',
          label: 'name'
        }
    };
  },
  created() {
    this.getAllRole();
    this.getAllMenu();
    
  },
  
  methods: {
    getAllRole() {
      this.$axios
        .post("hr/RoleController/getAllRole", this.$qs.stringify({}))
        .then((value) => {
          this.roles = value.data;
        })
        .catch((value) => {
          console.error(value);
        });
    },
    getAllMenu(){
      this.$axios.get(
        'menu/getAllMenu',
        this.$qs.stringify({})
      ).then((value) => {
        this.menu=value.data;
      }).catch((value) => {
        console.error(value)
      })
    },
    setCheckedNode(rids) {
      console.log(rids)
      // for(let i=0;i<this.roles.length;i++){
      //     this.$axios.post(
      //     'menu/getMenuByRid',
      //     this.$qs.stringify({rid:this.roles[i].id})
      //   ).then((value) => {
      //     let getr=value.data[0];
      //     console.log(getr)
      //     let ro=[];
      //     for(let j=0;j<getr.secondaryMenus.length;j++){
      //         for(let m=0;m<getr.secondaryMenus[j].secondaryMenus.length;m++){
      //           ro.push({
      //             id:getr.secondaryMenus[j].secondaryMenus[m].id,
      //             name:getr.secondaryMenus[j].secondaryMenus[m].name
      //           })
      //         }
      //     }
      //     this.$refs.tree[i].setCheckedNodes(ro);
      //   }).catch((value) => {
      //     console.error(value)
      //   })
      // }
        
        if(rids!=null&&rids!=''){
          this.$axios.post(
          'menu/getMenuByRid',
          this.$qs.stringify({rid:rids})
        ).then((value) => {
          this.$refs.tree[rids-1].setCheckedNodes(value.data);
        }).catch((value) => {
          console.error(value)
        })}

    },
    deleteRole(id){
        this.$axios.post(
          'hr/RoleController/deleteRoleById',
          this.$qs.stringify({id:id})
        ).then((value) => {
          if (value.data>0) {
             this.$message({
                message: "删除成功",
                type: "success",
              });
          }else {
            alert("删除失败")
          }
          this.getAllRole();
        }).catch((value) => {
          if (value!=null) {
            this.$message({
                message: "该数据有关联数据，删除失败",
                type: "error",
              });
          }
        })
    },

    updateRoleMenu(rid,index){
      
      let menuRole=this.$refs.tree[index].getCheckedNodes();
      let ids=[];
      for(let i=0;i<menuRole.length;i++){
          ids.push(menuRole[i].id)
      }
        this.$axios.post(
          "hr/RoleController/updateMenuRole",
          this.$qs.stringify({
            rid:rid,
            mids:ids
          })
        ).then((value) => {
          if (value.data>0) {
             this.$message({
                message: "修改成功",
                type: "success",
              });
          }else {
             this.$message({
                message: "权限没有改变，修改失败",
                type: "error",
              });
          }
          this.getAllRole();
        }).catch((value) => {
          console.error(value)
        })
        
    }
  },
};
</script>
<style scoped>
    .text {
  font-size: 14px;
    }

    .item {
  margin-bottom: 18px;
    }

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
